---
title: Use with Modern.js - Flowbite React
description: Learn how to install Flowbite React with Modern.js
---

This guide provides three ways to integrate Flowbite React with Modern.js:

1. [Quick Start](#quick-start): Create a new project with everything pre-configured
2. [Add to Existing Project](#add-to-existing-project): Add Flowbite React to an existing Modern.js project
3. [Manual Setup](#manual-setup): Set up everything from scratch manually

<TextDivider>Quick Start (Recommended)</TextDivider>

## Quick Start

The fastest way to get started is using our project creation CLI, which sets up a new Modern.js project with Flowbite React, Tailwind CSS, and all necessary configurations:

```bash
npx create-flowbite-react@latest -t modernjs
```

This will:

- Create a new Modern.js project
- Install and configure Tailwind CSS
- Set up Flowbite React with all required dependencies
- Configure dark mode support
- Set up example components

<TextDivider>Add to Existing Project</TextDivider>

## Add to Existing Project

If you already have a Modern.js project and want to add Flowbite React, you can use our initialization CLI:

```bash
npx flowbite-react@latest init
```

This will automatically:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Set up necessary configurations

<TextDivider>Manual Setup</TextDivider>

## Manual Setup

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

### 1. Create Project

Create a new Modern.js project:

```bash
npx @modern-js/create@latest my-app
cd my-app
```

When prompted, select:

- "Web Application"
- "React"

### 2. Configure Tailwind CSS

Install Tailwind CSS and its dependencies:

```bash
npm install -D tailwindcss @tailwindcss/postcss
```

Update `modern.config.ts` to include Tailwind CSS:

```ts {2,14-20}
import { appTools, defineConfig } from "@modern-js/app-tools";
import tailwindcss from "@tailwindcss/postcss";

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  runtime: {
    router: true,
  },
  plugins: [
    appTools({
      bundler: "rspack", // Set to 'webpack' to enable webpack
    }),
  ],
  tools: {
    postcss: {
      postcssOptions: {
        plugins: [tailwindcss],
      },
    },
  },
});
```

Update `src/routes/index.css` to include Tailwind CSS:

```css
@import "tailwindcss";
```

### 3. Install Flowbite React

Install Flowbite React:

```bash
npx flowbite-react@latest init
```

This will:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Configure Modern.js to include Flowbite React plugin

## Try it out

Now that you have successfully installed Flowbite React you can start using the components from the library:

```tsx
// src/routes/page.tsx
import { Button } from "flowbite-react";

export default function Index() {
  return (
    <div className="p-4">
      <Button>Click me</Button>
    </div>
  );
}
```

<hr />

## Templates

- [Github](https://github.com/themesberg/flowbite-react-template-modernjs)
- [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-modernjs)
